<template>
    <view class="card">
        <view class="card__title">{{props.title}}</view>
        <view class="card__desc">{{props.desc}}</view>
        <view class="card__body">
            <view class="card__price" v-if="props.price.current!=''">
                <view class="card__current-price">￥{{props.price.current}}</view>
                <view class="card__original-price">￥{{props.price.original}}</view>
            </view>
            <view class="card__statistic">
                <slot name="statistic"></slot>
            </view>
        </view>

        <slot name="extra-content"></slot>
    </view>
</template>
<script setup lang="ts">
    import {
        IntroductionProps,
        defaultIntroductionProps
    } from '@/props.ts';
    const props = withDefaults(defineProps<IntroductionProps>(), defaultIntroductionProps);
</script>
<style lang="scss" scoped>
    .card {
        background-color: #fff;
        padding: 20rpx;

        &__title {
            font-size: 32rpx;
            font-weight: bold;
        }

        &__desc {
            font-size: 24rpx;
            color: #b2b2b2;
            padding: 20rpx 0;
        }

        &__body {
            display: flex;
            justify-content: space-between;
        }

        &__price {
            display: flex;
            align-items: center;
        }

        &__current-price {
            coLor: #e75485;
            font-weight: bold;
        }

        &__original-price {
            font-size: 24rpx;
            coLor: #a6aab3;
            font-style: italic;
            text-decoration: line-through;
            margin-left: 20rpx;
        }

        &__statistic {
            font-size: 22rpx;
        }
    }
</style>